{% extends 'account/account_base.html' %}
{% load thumbnail %}

{% block content %}
<div class="centered">
    <div class="information">
        <h2>Edit your account</h2>
        <div class="line"></div>
        <p>You can edit your account using the following from:</p>
        <div class="content">
            {% thumbnail user.profile.photo "200x200" crop="50%" as im %}
                <img src="{{ im.url }}">
            {% endthumbnail %}
            {{ user_form.errors }}
            {{ user_form.errors }}
            
            <form action="{% url 'user_edit' %}" method="POST" enctype="multipart/form-data">
                {% csrf_token %}
                <div>
                    {% for field in user_form %}
                    <div class="fields">
                        {% if field.errors %}
                            <div style="color: #FF2238; font-weight: bold;" class="label-errors">{{ field.label }}</div>
                            <div class="field-errors">{{ field }}</div>
                        {% else %}
                            {{ field.label }}
                            {{ field }}
                        {% endif %}
                    </div>
                    {% endfor %}
                    {% for field in profile_form %}
                    <div class="fields">
                        {% if field.errors %}
                            <div style="color: #FF2238; font-weight: bold;" class="label-errors">{{ field.label }}</div>
                            <div class="field-errors">{{ field }}</div>
                        {% else %}
                            {{ field.label }}
                            {{ field }}
                        {% endif %}
                    </div>
                    {% endfor %}
                </div>
                <button type="submit" class="btn btn-success">Edit</button>
            </form>
        </div>
    </div>
</div>
    <style>
        .content {
            display: flex;
            align-items: flex-start;
            margin-top: 3em;
        }

        img {
            margin: 2em 2em 1em 0;
            border-radius: 50%;
        }
    </style>
{% endblock content %}
